<script setup>
import {createApp, defineAsyncComponent, nextTick, reactive, ref} from "vue";
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import api from "@/api";
import {ElMessageBox, ElNotification} from "element-plus";






const start1 = moment(new Date()).format("YYYY-MM-DD");






/**
 * 显示删除弹框
 */

const showRemove = (id) => {
	ElMessageBox.confirm(
		'您确认要删除改任务吗？此操作不可撤销。',
		{
			confirmButtonText: '删除',
			cancelButtonText: '取消',
			type: 'warning',
			beforeClose
		}
	)

	async function beforeClose(action, instance, done) {
		if (action === 'confirm') {
			instance.confirmButtonLoading = true
			instance.confirmButtonText = '删除中...'
			const req = await api.task.delete.get({taskId: id})
			if (req.code === 200) {
				done()
				instance.confirmButtonLoading = false
				getTaskList()
			}

		} else {
			done()
		}
	}
}

/**
 * 领导审批
 */
const examine = (id) => {
	ElMessageBox.confirm(
		'您确认要审批改任务吗？此操作不可撤销。',
		{
			confirmButtonText: '审批',
			cancelButtonText: '取消',
			type: 'warning',
			beforeClose
		}
	)

	async function beforeClose(action, instance, done) {
		if (action === 'confirm') {
			instance.confirmButtonLoading = true
			instance.confirmButtonText = '审批中...'
			const req = await api.task.examTask.get({taskId: id})
			if (req.code === 200) {
				done()
				instance.confirmButtonLoading = false
				getTaskList()
			}

		} else {
			done()
		}
	}
}

const handleClick = (element) => {
	ElMessageBox.confirm(
		'您确认要审批该任务状态申请吗？此操作不可撤销。',
		{
			confirmButtonText: '审批',
			cancelButtonText: '取消',
			type: 'warning',
			beforeClose
		}
	)
	async function beforeClose(action, instance, done) {
		if (action === 'confirm') {
			instance.confirmButtonLoading = true
			instance.confirmButtonText = '审批中...'
			const req = await api.taskApply.examTask.post(element)
			if (req.code === 200) {
				done()
				instance.confirmButtonLoading = false
				getTaskApplyList()
			}

		} else {
			done()
		}
	}

	console.log('click')
	console.log(element)
}

const rejectClick = (element) => {
	ElMessageBox.confirm(
		'您确认要驳回该任务状态申请吗？此操作不可撤销。',
		{
			confirmButtonText: '驳回',
			cancelButtonText: '取消',
			type: 'warning',
			beforeClose
		}
	)
	async function beforeClose(action, instance, done) {
		if (action === 'confirm') {
			instance.confirmButtonLoading = true
			instance.confirmButtonText = '驳回中...'
			const req = await api.taskApply.rejectTask.post(element)
			if (req.code === 200) {
				done()
				instance.confirmButtonLoading = false
				getTaskApplyList()
			}

		} else {
			done()
		}
	}

	console.log('click')
	console.log(element)
}


const tableData = ref([])
const approvedStatue = ref('')

const getTaskApplyList = () => {
	api.taskApply.list.get().then(res => {
		tableData.value = res.data
		console.log('88888888888888888888888888888888')
		console.log(tableData.value)
	})
}
getTaskApplyList()

</script>

<template>
	<router-view></router-view>
	<el-main id="demo-main">
		<el-table :data="tableData" style="width: 100%">
			<el-table-column fixed prop="applyTask" label="任务"  />
			<el-table-column prop="approvedDept" label="申请部门"  />
			<el-table-column prop="applyUserName" label="申请人" />
			<el-table-column prop="applyReason" label="申请内容" />
			<el-table-column prop="applyTime" label="申请时间"  />
			<el-table-column prop="approvedUserName" label="审批人"  />
			<el-table-column prop="approvedTime" label="审批时间"  />[
			<el-table-column fixed="right" label="操作">
				<template #default="scope">
					<el-button link type="primary" size="small" @click="handleClick(scope.row)" v-if="scope.row.approvedStatue==='0'">
						审批
					</el-button>
					<el-button link type="primary" size="small" @click="rejectClick(scope.row)" v-if="scope.row.approvedStatue==='0'">驳回</el-button>

					<el-tag :type="success" v-show="scope.row.approvedStatue==='1'"
						disable-transitions> 已审批 </el-tag>
					<el-tag :type="primary" v-show="scope.row.approvedStatue==='2'"
							disable-transitions> 已审批 </el-tag>
				</template>
			</el-table-column>
		</el-table>
	</el-main>
</template>

<script>
import {CircleCheck, Clock, MoreFilled, Plus, Remove, Search, Sort} from "@element-plus/icons-vue";
import moment from "moment/moment";


export default {
	name: 'autocode',
	computed: {
		Sort() {
			return Sort
		},
		moment() {
			return moment
		},
		MoreFilled() {
			return MoreFilled
		},
		Remove() {
			return Remove
		},
		CircleCheck() {
			return CircleCheck
		},
		Clock() {
			return Clock
		},
		Search() {
			return Search
		},
		Plus() {
			return Plus
		}
	},
	data() {
		return {
			tabList: [{
				label: '全部任务',
				name: '0'
			}, {
				label: '我负责的任务',
				name: '1'
			}, {
				label: '我参与的任务',
				name: '2'
			}, {
				label: '我创建的任务',
				name: '3'
			}
			],

			formInline: {
				search: ''
			},

			taskStatusList: [ // 任务状态：未开始0 进行中1 已完成2
				{
					icon: Clock,
					type: 'warning',
					name: '进行中'
				}, {
					icon: Remove,
					type: 'danger',
					name: '挂起'
				}, {
					icon: CircleCheck,
					type: 'success',
					name: '已完成'
				}],
			endTimeStatusList: ['danger', 'warning', 'info'], //截止时间状态：过期0 今天1 明天2

		}
	},
	created() {
		console.log(new Date('2023-09-22').getTime() - new Date('2023-09-21').getTime())
	},
	methods: {
		/**
		 * 点击添加按钮
		 */

		click(url) {
			this.$router.push({
				path: url
			});
		},

	}
}
</script>

<style lang="scss" scoped>

.add-upload {
	position: absolute;
	width: 70px;
	height: 30px;
	top: 90px;
	right: 18px;
}

#demo-main {
	font-size: 17px;
	overflow: hidden;
	background: #fff;
	padding: 0;
	height: 100%;

	.demo-header {
		padding: 0 15px;
		border: 1px solid #e6e6e6;

		> div:first-child {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #e4e7ed;

			.el-tabs {
				margin-left: 15px;
			}
		}

		.project-title {
			.el-button {
				font-size: 16px;
				border: 0;

				.el-icon {
					margin-left: 10px;
				}
			}
		}

		.search-form {
			padding: 7px 0;

			.add-btn {
				float: right;
				margin-top: 4px;
			}
		}
	}

	.list-main {
		padding: 0 15px 15px;
		display: flex;
		flex-direction: row;
		overflow: hidden;
		overflow-x: auto;
		background: #f6f8f9;
		height: calc(100% - 96px - 5px);

		// 控制列表高度
		.el-scrollbar {
			padding: 12px 8px 4px;
			height: calc(100% - 54px - 32px);
		}

		> div {
			width: 320px;
			border-right: solid 1px #eee;
			flex: 0 0 auto;

			.task-main-header {
				border-bottom: 1px solid #eee;
				padding: 12px 8px;

				> div {
					&:first-child {
						margin-bottom: 6px;
					}
				}

				.card-addTask-title {
					height: 31px;
					line-height: 37px;
					display: flex;
					align-items: center;

					.card-addTask-name {
						margin-left: 10px;
						color: #999;
					}
				}
			}

			.task-main-body {
				height: 100%;

				.draggable {
					height: 100%;
				}

				.el-card {
					cursor: pointer;

					.card-content-body {
						display: flex;
						justify-content: space-between;
						margin-bottom: 6px;
						line-height: 32px;

						.endTime-btn {
							border: 0;
						}

						&:last-child {
							margin-bottom: 0;
						}
					}

					.card-content-body-title {
						display: flex;

						> div {
							flex: 1;
						}

						> .el-button {
							margin-top: 5px;
						}
					}
				}
			}
		}
	}
}

.card-content-body-response {
	font-size: 13px;
	margin-left: 11px;
	padding-right: 0px;
	margin-right: 5px;
	width: 120px;
	border-right: 1px solid #d1dbe5;
}

.card-content-response-body {
	display: flex;
	justify-content: space-between;
	//align-items: center;
}
.card-content-body-response-user {
	margin-bottom: 10px;
	font-size: 13px;
	display: flex;
	justify-content: flex-start;
}
.card-content-body-response-user-item {
	width: calc(100% - 108px);
	font-size: 13px;
	display: flex;
	flex-wrap: wrap;
}
.card-content-body-response-user-item-project {
	//width: calc(100% - 108px);
	width: 100%;
	font-size: 13px;
	display: flex;
	flex-wrap: wrap;
}
.select-user {
	display: flex;

	.select-user-list {
		display: flex;

		> div {
			margin-right: 10px;
		}

		.user-avatar {
			> div {
				position: relative;

				&:hover {

					.del-user {
						display: unset;
						position: absolute;
						right: 0px;
						bottom: 0px;
						background: rgba(16, 16, 16, 0.39);
						top: 0px;
					}
				}

				.del-user {
					display: none;
				}
			}
		}
	}
}

.del-task-btn {
	width: 100%;
	justify-content: flex-start;
}

.task-success {
	text-decoration: line-through;
	color: #aaa !important;
}

.task-success-btn.el-button.is-disabled:hover {
	cursor: pointer;
}

.add-task-bottom {
	display: flex;
	justify-content: space-between;
}
</style>


<style scoped>
.select-taskList .el-button {
	width: 100%;
	justify-content: flex-start;
}

.select-taskList .el-divider {
	margin: 5px 0;
}

.search-form .el-form-item {
	margin-bottom: 0;
	margin-right: 0;
	width: 252px;
}

.demo-header >>> .el-tabs__header {
	margin: 0;
}

.search-form >>> .el-input__wrapper {
	box-shadow: none;
}

.search-form .el-input {
	margin-bottom: 0;
	margin-right: 0;
}

.search-form button {
	border: 0;
}

.el-card {
	margin-bottom: 15px;
}

.code-item {
	cursor: pointer;
}

.code-item .img {
	width: 100%;
	height: 150px;
	background: #09f;
	display: flex;
	align-items: center;
	justify-content: center;
}

.code-item .img i {
	font-size: 100px;
	color: #fff;
	background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.code-item .title {
	padding: 15px;
}

.code-item .title h2 {
	font-size: 16px;
}

.code-item .title h4 {
	font-size: 12px;
	color: #999;
	font-weight: normal;
	margin-top: 5px;
}

.code-item .title p {
	margin-top: 15px;
}
.el-card {
	--el-card-border-color: var(--el-border-color-light);
	--el-card-border-radius: 3px;
	--el-card-padding: 10px;
	--el-card-bg-color: var(--el-fill-color-blank);
}

>>> .el-scrollbar__view {
	height: 100%;
}
</style>
